<template>
  <div class="orderView">
    <header>
      <div class="left" @click="$router.back()"></div>
      <p>我的订单</p>
    </header>

    <div class="content">
      <van-tabs v-model="active" border ellipsis sticky offset-top="50px">
        <van-tab title="所有订单">
          <div class="order" v-for="(vl, index) in order" :key="index">
            <div class="header">
              <div class="text">订单号:{{ vl.order_code }}</div>
              <div class="type">{{ vl.order_type }}</div>
            </div>

            <div class="item" v-for="(item, i) in vl.item" :key="i">
              <div class="img">
                <img :src="item.imgUrl" alt="" />
              </div>
              <div class="right">
                <div class="text">
                  <div class="title">
                    {{ item.title }}
                  </div>
                  <div class="price">￥{{ item.price }}.0</div>
                </div>
                <div class="bottom">
                  <div class="type">
                    颜色：{{ item.type }} 尺码：{{ item.size }}(S)
                  </div>
                  <div class="num">X{{ item.num }}</div>
                </div>
              </div>
            </div>

            <div class="all">
              共计{{ vl.allNum }}件商品 合计：￥{{
                vl.allPrice
              }}.0（含运费￥0.0）
            </div>

            <div class="btn">
              <div class="buy" v-show="vl.order_type == '待付款'">立即支付</div>
              <div class="cancel" @click="cancel(vl.order_code)">取消</div>
            </div>
          </div>
        </van-tab>

        <van-tab title="待付款">
          <div
            class="order"
            v-for="(vl, index) in order"
            :key="index"
            v-show="vl.order_type == '待付款'"
          >
            <div class="header">
              <div class="text">订单号:{{ vl.order_code }}</div>
              <div class="type">{{ vl.order_type }}</div>
            </div>

            <div class="item" v-for="(item, i) in vl.item" :key="i">
              <div class="img">
                <img :src="item.imgUrl" alt="" />
              </div>
              <div class="right">
                <div class="text">
                  <div class="title">
                    {{ item.title }}
                  </div>
                  <div class="price">￥{{ item.price }}.0</div>
                </div>
                <div class="bottom">
                  <div class="type">
                    颜色：{{ item.type }} 尺码：{{ item.size }}(S)
                  </div>
                  <div class="num">X{{ item.num }}</div>
                </div>
              </div>
            </div>

            <div class="all">
              共计{{ vl.allNum }}件商品 合计：￥{{
                vl.allPrice
              }}.0（含运费￥0.0）
            </div>

            <div class="btn">
              <div class="buy">立即支付</div>
              <div class="cancel" @click="cancel(vl.order_code)">取消</div>
            </div>
          </div>
        </van-tab>

        <van-tab title="待发货">
          <div
            class="order"
            v-for="(vl, index) in order"
            :key="index"
            v-show="vl.order_type == '待发货'"
          >
            <div class="header">
              <div class="text">订单号:{{ vl.order_code }}</div>
              <div class="type">{{ vl.order_type }}</div>
            </div>

            <div class="item" v-for="(item, i) in vl.item" :key="i">
              <div class="img">
                <img :src="item.imgUrl" alt="" />
              </div>
              <div class="right">
                <div class="text">
                  <div class="title">
                    {{ item.title }}
                  </div>
                  <div class="price">￥{{ item.price }}.0</div>
                </div>
                <div class="bottom">
                  <div class="type">
                    颜色：{{ item.type }} 尺码：{{ item.size }}(S)
                  </div>
                  <div class="num">X{{ item.num }}</div>
                </div>
              </div>
            </div>

            <div class="all">
              共计{{ vl.allNum }}件商品 合计：￥{{
                vl.allPrice
              }}.0（含运费￥0.0）
            </div>

            <div class="btn">
              <div class="cancel" @click="cancel(vl.order_code)">取消</div>
            </div>
          </div>
        </van-tab>

        <van-tab title="待收货">
          <div
            class="order"
            v-for="(vl, index) in order"
            :key="index"
            v-show="vl.order_type == '待收货'"
          >
            <div class="header">
              <div class="text">订单号:{{ vl.order_code }}</div>
              <div class="type">{{ vl.order_type }}</div>
            </div>

            <div class="item" v-for="(item, i) in vl.item" :key="i">
              <div class="img">
                <img :src="item.imgUrl" alt="" />
              </div>
              <div class="right">
                <div class="text">
                  <div class="title">
                    {{ item.title }}
                  </div>
                  <div class="price">￥{{ item.price }}.0</div>
                </div>
                <div class="bottom">
                  <div class="type">
                    颜色：{{ item.type }} 尺码：{{ item.size }}(S)
                  </div>
                  <div class="num">X{{ item.num }}</div>
                </div>
              </div>
            </div>

            <div class="all">
              共计{{ vl.allNum }}件商品 合计：￥{{
                vl.allPrice
              }}.0（含运费￥0.0）
            </div>

            <div class="btn">
              <div class="cancel" @click="cancel(vl.order_code)">取消</div>
            </div>
          </div>
        </van-tab>

        <van-tab title="待评价">
          <div
            class="order"
            v-for="(vl, index) in order"
            :key="index"
            v-show="vl.order_type == '待评价'"
          >
            <div class="header">
              <div class="text">订单号:{{ vl.order_code }}</div>
              <div class="type">{{ vl.order_type }}</div>
            </div>

            <div class="item" v-for="(item, i) in vl.item" :key="i">
              <div class="img">
                <img :src="item.imgUrl" alt="" />
              </div>
              <div class="right">
                <div class="text">
                  <div class="title">
                    {{ item.title }}
                  </div>
                  <div class="price">￥{{ item.price }}.0</div>
                </div>
                <div class="bottom">
                  <div class="type">
                    颜色：{{ item.type }} 尺码：{{ item.size }}(S)
                  </div>
                  <div class="num">X{{ item.num }}</div>
                </div>
              </div>
            </div>

            <div class="all">
              共计{{ vl.allNum }}件商品 合计：￥{{
                vl.allPrice
              }}.0（含运费￥0.0）
            </div>

            <div class="btn">
              <div>去评价</div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      useInfo: null,
      order: null,
    };
  },
  methods: {
    getUserInfoFun() {
      let user = localStorage.getItem("HL_user");
      this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
      if (user) {
        this.order = this.userInfo[user].order;
      }
    },
    // 取消订单
    cancel(code) {
      let user = localStorage.getItem("HL_user");
      let index = this.userInfo[user].order.findIndex(
        (vl) => vl.order_code == code
      );
      this.userInfo[user].order.splice(index, 1);
      this.setItem("userInfo", this.userInfo);
    },
    // 修改数据
    setItem(item, newItem) {
      sessionStorage.setItem(item, JSON.stringify(newItem));
    },
  },
  created() {
    this.getUserInfoFun();
  },
  mounted() {
    this.active = Number(this.$route.query.id);
  },
  computed: {},
};
</script>

<style lang="scss" scoped>
.orderView {
  > .content {
    padding-bottom: 150px;

    .van-tabs::v-deep .van-tabs__wrap {
      height: 32px;

      .van-tabs__line {
        border-radius: 0;
        background: #e74165;
      }

      .van-tab {
        font-size: 10px;
        top: -1px;

        &.van-tab--active {
          color: #e74165;
        }
      }
    }

    .order {
      border-top: 1px solid #f0f0f0;
      border-bottom: 1px solid #c2c2c2;
      padding-bottom: 10px;

      > .header {
        display: flex;
        justify-content: space-between;

        height: 50px;
        line-height: 50px;
        padding-left: 20px;
        padding-right: 15px;

        > .type {
          font-size: 10px;
          color: #b40510;
        }
      }

      > .item {
        padding: 5px 15px;
        background: #f9f9f9;
        border-top: 1px solid #e4e4e4;
        border-bottom: 1px solid #e4e4e4;
        display: flex;
        margin-bottom: 10px;

        > .img {
          width: 80px;
          height: 80px;
          margin-right: 10px;

          > img {
            width: 100%;
          }
        }

        .right {
          flex: 1;

          > .text {
            display: flex;
            padding-top: 5px;
            font-size: 12px;
            line-height: 14px;

            > .price {
              color: #b40510;
            }
          }

          > .bottom {
            display: flex;
            justify-content: space-between;
            font-size: 10px;

            > .type {
              color: #666;
            }
          }
        }
      }

      > .all {
        height: 36px;
        line-height: 30px;
        padding-right: 16px;
        text-align: right;
        position: relative;

        &::after {
          content: "";
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 1px;
          background: #f0f0f0;
          transform: scaleY(0.5);
        }
      }

      > .btn {
        height: 52px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        border-bottom: 1px solid #c2c2c2;

        > div {
          margin-right: 15px;
          width: 76px;
          height: 34px;
          line-height: 34px;
          color: #fff;
          text-align: center;
          font-size: 12px;
          background: #b40510;
        }
      }
    }
  }
}
</style>